<template>
    <div id="top">
        <div class="top-sou">
            <div class="tops">西安 ↓</div>
            <div class="topo">
                <button class="btsou"><span class="iconfont icon-quanbu"></span></button><input type="text" placeholder="痛仰乐队" class="btkuang">
            </div>
            <div class="topu"><span class="iconfont icon-quanbu"></span></div>
        </div>
        <div class="top-xuan">
            <div class="topxuan">
                <li>精选</li>
                <li>话剧音乐剧</li>
                <li>展览休闲</li>
                <li>Livehouse</li>
                <li>音乐</li>
                <li>精选</li>
            </div>
        </div>
    </div>
</template>


<script>
export default {
    name:"Searchbox"
}
</script>

<style scoped>

#top{
      width: 3.27rem;
  margin: 0 auto
}
.top-sou{
    height: 0.44rem;
    line-height: 0.44rem;
    font-size: 0.18rem;
    display: flex;
    justify-content: space-around;
    align-items:center;
}
.topo{
    height: 0.3rem;
    border-radius: 1.02rem 1.02rem 1.02rem 0.2rem;
    line-height: 0.2rem;
    overflow: hidden;
    background: -webkit-linear-gradient(left, #feefea , #f2f0fd);
}
.top-sou .topo input{
    height: 100%;
    width: 1.8rem;
    background: none;
}
.top-sou .topo button{
    background: none;
    border: none;
    outline: none;
}
.btsou{
    vertical-align : middle;
    width: 0.2rem;
    font-size: 0.1rem !important;
    margin-top: 0.03rem;
    margin-left: 0.1rem;
}
.top-xuan{
    height: 0.5rem;
    overflow-x:auto;
}
.topxuan{
    width: 120%;
    height: 0.5rem;
    display: flex;
    align-items:center;
    justify-content: space-around;
    font-size: 0.15rem;
    color: #9a9da4;
}
.top-xuan .topxuan li{
    padding-bottom: 0.1em;
}
</style>
